<!--  -->
<template>
  <el-container>
    <el-header>
      <span class="wsd_txt">万事达-TMS<span class="textColor">客户端</span></span>
      <span>
        <a href="#" class="exit">退出系统</a>
        <i class="iconfont icon-svg45-copy top_icon"></i>
      </span>
    </el-header>
    <el-main>
      <div class="long_title">创建询价单</div>
      <div class="dd_num">
        <span class="textColor">*</span>订单号：系统自动生成
      </div>
      <div class="mini_title">运输地址</div>
      <table class="tab_style"  border="0" cellspacing="1" cellpadding="0">
        <tr id="adr_tab">
          <th width="278px"><span class="textColor tb_width">*</span>始发地</th>
          <th width="278px"><span class="textColor tb_width">*</span>目的地</th>
        </tr>
        <tr>
          <td>
            <el-select v-model="formInline.title">
              <el-option label="上海市" value="1"></el-option>
              <el-option label="深圳市" value="2"></el-option>
              <el-option label="广州市" value="3"></el-option>
              <el-option label="成都市" value="4"></el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="formInline0.title">
              <el-option label="上海市" value="1"></el-option>
              <el-option label="深圳市" value="2"></el-option>
              <el-option label="广州市" value="3"></el-option>
              <el-option label="成都市" value="4"></el-option>
            </el-select>
          </td>
        </tr>
        <tr class="input_msg">
          <td>
            <input type="text" v-model="formInline.value">
          </td>
          <td>
            <input type="text" v-model="formInline0.value">
          </td>
        </tr>
      </table>
      <div class="mini_title">计划时间</div>
      <table class="tab_style">
        <tr>
          <th width="190px"><span class="textColor">*</span>计划装货时间</th>
          <th width="190px"><span class="textColor">*</span>计划到货时间</th>
        </tr>
        <tr>
          <td>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.date1"
              style="width: 100%"
            ></el-date-picker>
          </td>
          <td>
            <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date2"
                  style="width: 100%"
                ></el-date-picker>
          </td>
        </tr>
      </table>
      <div class="mini_title">货物信息</div>
      <table class="tab_style" border="0" cellspacing="1" cellpadding="0" id="goods_msg">
        <tr>
          <th width="110px"><span class="textColor">*</span>货名</th>
          <th width="110px"><span class="textColor">*</span>规格型号</th>
          <th width="110px"><span class="textColor">*</span>总包装</th>
          <th width="110px"><span class="textColor">*</span>总数量</th>
          <th width="110px"><span class="textColor">*</span>总重量kg</th>
          <th width="110px"><span class="textColor">*</span>总体积m³</th>
          <th width="110px" @click="add_table()"><span class="textColor">*</span>+</th>
        </tr>
        <!-- <tr>
          <td><input type="text" class="goods_name"></td>
          <td><input type="text" class="goods_size"></td>
          <td>
            <select class="total_bag">
              <option label="袋" value="1"></option>
              <option label="箱" value="2"></option>
              <option label="个" value="3"></option>
              <option label="台" value="4"></option>
              <option label="卷" value="4"></option>
              <option label="其他" value="4"></option>
            </select>
          </td>
          <td><input type="text" class="total_num"></td>
          <td><input type="text" class="total_weight"></td>
          <td><input type="text" class="total_size"></td>
          <td>-</td>
        </tr> -->
      </table>
      <div class="mini_title" v-model="notes">备注</div>
      <textarea></textarea>
      <div>
        <el-button @click="submit()">提交</el-button>
        <el-button>取消</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 始发地
      formInline: {
        title: "",
        value: "",
        timeType: "",
      },
      // 目的地
      formInline0: {
        title: "",
        value: "",
        timeType: "",
      },
      // 计划时间
      ruleForm: {
        date1: "",//装货时间
        date2: "",//到货时间
      },
      // 货物详情
      goods_arr:[
        // {
        //   goods_name:"",
        //   goods_size:"",
        //   total_bag:"",
        //   total_num:"",
        //   total_weight:"",
        //   total_size:""
        // }
      ],
      goods_index:0,
      notes:""
      
      
    };
  },
  methods: {
    add_table(){
      var goods_msg = document.getElementById("goods_msg");
      var dom = document.createElement('tr');
      var goods_index = this.goods_index++;
      dom.setAttribute("goods_index",goods_index);
      dom.innerHTML=`
          <td class="td_style"><input type="text" class="goods_name"></td>
          <td class="td_style"><input type="text" class="goods_size"></td>
          <td class="td_style">
            <select class="total_bag">
              <option label="袋" value="1"></option>
              <option label="箱" value="2"></option>
              <option label="个" value="3"></option>
              <option label="台" value="4"></option>
              <option label="卷" value="5"></option>
              <option label="其他" value="6"></option>
            </select>
          </td>
          <td class="td_style"><input type="text" class="total_num"></td>
          <td class="td_style"><input type="text" class="total_weight"></td>
          <td class="td_style"><input type="text" class="total_size"></td>
          <td class="td_style">-</td>
        `;
      goods_msg.appendChild(dom);
    },
    submit(){
      var list=document.querySelectorAll("#goods_msg tr");
      console.log(list.length);
      for(var i=0;i<list.length-1;i++){
        // var index = list[i].dataset.index;
        var obj={};
        var goods_name = document.getElementsByClassName("goods_name")[i];
        var goods_size = document.getElementsByClassName("goods_size")[i];
        var total_bag = document.getElementsByClassName("total_bag")[i];
        var total_num = document.getElementsByClassName("total_num")[i];
        var total_weight = document.getElementsByClassName("total_weight")[i];
        var total_size = document.getElementsByClassName("total_size")[i];

        obj.goods_name = goods_name.value;
        obj.goods_size = goods_size.value;
        obj.total_bag = total_bag.value;
        obj.total_num = total_num.value;
        obj.total_weight = total_weight.value;
        obj.total_size = total_size.value;
        this.goods_arr.push(obj);
      }
      console.log(this.goods_arr);
    }
  },
};
</script>
<style scoped lang="less">
.el-header,
.el-footer {
  display: flex;
  justify-content: space-between;
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  .wsd_txt{
    font-weight: 600;
    font-size: 24px;
  }
  span{
    i{
    font-size: 32px;;
    }
    a{
      color: #000;
    }
  }

}

.tab_style th{
  border: 1px solid #ffffffe7;
  text-align: center;
  height: 30px;
  background-color: #b3c0d1b4;
  border-color: #e9eef3;
}
.tab_style {
  border: none;
  border-spacing: 0; /*去掉单元格间隙*/
}
input:focus{
  outline: none;
}
.long_title{
  height: 32px;
  line-height: 32px;
  width: 80%;
  margin: 10px 0;
  text-align: left;
  padding-left: 10px;
  background-color: #b3c0d1;
}
.main_title {
  height: 32px;
  background-color: #b3c0d1;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-top: 5px;
}
.mleft {
  margin-left: 30px;
}
.top_icon {
  float: right;
}
.exit {
  float: right;
  margin-left: 30px;
}
.textColor {
  color: red;
}
.dd_num {
  border-bottom: 1px solid;
  height: 45px;
  display: flex;
  justify-content: start;
}
// .tb_width{
//   width: 280px;
// }
.td_style {
  border: 1px solid #e9eef3;
  text-align: center;
  height: 30px;
  // border-bottom: 1px solid rgba(153, 153, 153, 0.473);
  // border: 1px solid #e9eef3;
  background-color: #fff;
}
#adr_tab input{
  width: 280px;
  height: 32px;
  border:1px solid #e9eef3;
  background-color: #ffffff;
}
#goods_msg input{
  width: 110px;
  height: 32px;
  border:none;
  background-color: #fff;
}


#goods_msg select {
    background-color: #fff;
    border: 1px solid #fff;
    width: 110px;
    height: 34px;
}
.mini_title{
  height: 32px;
  line-height: 32px;
  width: 90px;
  margin: 10px 0;
  background-color: #b3c0d1;
}

</style>
<style lang="less" scoped>
textarea {
    border:0;
    border-radius:5px;
    width: 80%;
    height: 60px;
    padding: 10px;
    resize: none;
    display: flex;
    justify-content: start;
    margin-bottom: 10px;
}
textarea:focus{
  outline: none;
}
  /deep/.el-input__inner{
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border: 1px solid #fff;
  box-sizing: content-box;
  height: 32px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  width: 300px ;
}
/deep/.el-select .el-input.is-focus .el-input__inner {
  border-color: #999;
  border-radius: 0;
}
/deep/.el-select .el-input__inner{
  border-radius: 0;
  // width: 282px;
}
/deep/.el-select .el-input__inner:focus {
  border-color:  #999;
  border-radius: 0;

}
/deep/.el-select .el-input__inner:hover {
  border-color: #999;
  border-radius: 0;

}
.mini_title td{
  background-color: #fff;
}
.input_msg input{
  width: 346px;
  height: 32px;
  border:1px solid #e9eef3;
  background-color: #ffffff;
}
</style>